<template>
	<div>
		<div class='prizeDrawSpace'>

		</div>
		<div class="prizeDraw">
			<div class="prizeDraw_top">
				<div class="prizeDraw_top_close">
					<div class class="prizeDraw_top_close_left">
						<image src="@/static/image/left.png" mode="" @click="backEvent()"></image>
					</div> 发红包 <image src="@/static/image/close.png" mode="" class="closeImg" @click="closeDialog()">
					</image>
				</div>
				<div class="prizeDraw_top_title">
					红包余额：<span>{{ Amount || 0 }}</span>
				</div>
				<scroll-view @scrolltolower="scrolltolower" :style="{ height: scrollViewHeight + 'rpx' }" :scroll-y="true"
					:scroll-with-animation="true">
					<div class="zj_red_from">
						<div class="zj_red_from_items">
							<div class="zj_red_from_left">
								<!-- <span class="colorRed">*</span>	 -->
								红包标题：

							</div>
							<div class="zj_red_from_right">
								<input type="text" v-model.trim="from.title" placeholder="恭喜发财，大吉大利"
									placeholder-class="zj-placeholder-class" class="zj_red_from_right_input" maxlength="20">
							</div>
						</div>

						<div class="zj_red_from_items" @click='isRedMask = true'>
							<div class="zj_red_from_left">
								红包类型：
							</div>
							<div class="zj_red_from_right">
								{{ from.type === 1 ? '拼手气红包' : '普通红包' }}
								<image src="@/static/image/right.png" mode=""></image>
							</div>
						</div>
						<div class="zj_red_from_items" :class="isError === 1 ? 'colorRedLine' : ''" v-if="from.type === 1">
							<div class="zj_red_from_left ">
								<span class="colorRed">*</span>总金额：
							</div>
							<div class="zj_red_from_right inputNumClass">
								<input type="digit" v-model.trim="from.totalAmount" @blur="checkTotalAmount"
									@input="checkTotalAmount" placeholder="请输入金额" placeholder-class="zj-placeholder-class"
									maxlength="4"> <span>元</span>
							</div>
							<div class="zj_red_from_right_error" v-if="isError === 1">
								{{ ErrorTitle }}
							</div>
						</div>

						<div class="zj_red_from_items" :class="isError === 2 ? 'colorRedLine' : ''" v-if="from.type === 2">
							<div class="zj_red_from_left ">
								<span class="colorRed">*</span>单个金额：
							</div>
							<div class="zj_red_from_right inputNumClass">
								<input type="digit" v-model.trim="from.singleAmount" @blur="checkSingleAmount"
									@input="checkSingleAmount" placeholder="请输入金额" maxlength="4"
									placeholder-class="zj-placeholder-class">
								<span>元</span>
							</div>
							<div class="zj_red_from_right_error" v-if="isError === 2">
								{{ ErrorTitle }}
							</div>
						</div>

						<div class="zj_red_from_items" :class="isError === 3 ? 'colorRedLine' : ''">
							<div class="zj_red_from_left ">
								<span class="colorRed">*</span>红包个数：
							</div>
							<div class="zj_red_from_right inputNumClass">
								<input type="number" v-model.trim="from.number" @blur="checkRedNumber"
									@input="checkRedNumber" placeholder="请输入个数" maxlength="4" max="1000"
									placeholder-class="zj-placeholder-class">
								<span>个</span>
							</div>
							<div class="zj_red_from_right_error" v-if="isError === 3">
								{{ ErrorTitle }}
							</div>
						</div>
					</div>
					<div class="zj_red_text">
						为了您的支付安全，总金额超过1000元时，需验证手机号码
					</div>

					<div class="zj_red_btn">
						<div class="zj_red_btn_cont" @click='sendRedPacket()'>
							发红包
						</div>
					</div>

					<div class="zj_space">

					</div>
				</scroll-view>
			</div>
			<!-- 底部选择 -->
			<div class="allMask" v-if='isRedMask' @click='isRedMask = false'>

			</div>
			<div class="redDB" v-if='isRedMask'>
				<div class="redDB_items" @click.stop='closeEvent(1)'>
					拼手气红包
				</div>
				<div class="redDB_items" @click.stop='closeEvent(2)'>
					普通红包
				</div>
				<div class="redDB_items_btn redDB_items" @click='isRedMask = false'>
					取消
				</div>
			</div>
			<!-- 短信 -->

			<sms v-if='isSMS' :rootMobile='rootMobile' @sendRed='sendRed' :isSMSStatus='isSMSStatus'
				@CloseEvent='CloseEvent'></sms>

		</div>
	</div>
</template>

<script>
export default {
	filters: {
		formatDate(v) {
			const value = v * 1000
			const data = new Date(value);
			const month = data.getMonth() + 1;
			const day = data.getDate();
			const year = data.getFullYear();
			const hours = data.getHours();
			const minutes = data.getMinutes();
			const seconds = data.getSeconds();
			const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			return formattedTime;
		}
	},
	data() {
		return {
			params: {
				page: 1,
				pageSize: 10,
				liveId: '1801513352929742848'
			},
			from: {
				title: '恭喜发财，大吉大利',
				totalAmount: '',
				number: '',
				type: 1
			},
			redPackList: [],
			scrollViewHeight: 812,
			total: 0,
			redName: '',
			checkType: 0,
			Amount: '',
			isError: -1, //展示报错
			ErrorTitle: '',
			isRedMask: false, //是否展示蒙版
			isSMS: false, //短信
			rootMobile: '',
			isSMSStatus: false,
			$vm: ''
		}
	},
	onLoad(opt) {
		if (opt.liveId) {
			this.params.liveId = opt.liveId
			this.redName = opt.redName || ''
		}
		// 轮训余额
		this.timer = setInterval((res) => {
			this.getAmount()
		}, 30000)
		this.getAmount()
		this.orgGetInfo()

	},
	onHide() {
		clearInterval(this.timer)
	},

	methods: {
		closeDialog() {
			this.$utils.closeDialog(this)
			// uni.navigateBack()
		},
		async orgGetInfo() {
			const {
				data
			} = await this.$request(this.$Api.orgGet, {}, "get")
			if (data.code != 200) return
			this.rootMobile = data.data.rootMobile
			console.log('data')
		},
		// getAmount
		async getAmount() {
			const {
				data
			} = await this.$request(this.$Api.redAccountGet, {}, "get")
			if (data.code != 200) return
			this.Amount = parseFloat(data.data.amount / 100).toFixed(2);
		},
		messageError(title, type) {
			// uni.showToast({
			// 	title: title,
			// 	icon: 'none'
			// })
			this.ErrorTitle = title
			this.isError = type
			// if (type == 1) {
			// 	this.from.number = ''
			// } else {
			// 	this.from.singleAmount = ''
			// }
			return this.ErrorTitle

		},
		checkTotalAmount(event) {
			const value = event.target.value
			if (!value) {
				return this.messageError('总金额不能为空', 1);
			}
			if (value < 0.01) {
				return this.messageError('总金额不能小于0.01元', 1);
			}
			// 兼容输入过快
			setTimeout((res) => {
				if (value > Number(this.Amount)) {
					this.from.totalAmount = Number(this.Amount)
					return this.messageError('总金额不能大于余额', 1);
				}
			}, 300)
			if (value > 6000) {
				this.from.totalAmount = 6000
				return this.messageError('总金额不能大于6000元', 1);
			}
			if (this.from.number && value / this.from.number > 200) {
				return this.messageError('单个金额不能大于200元', 1);
			}
			if (this.from.number && value / this.from.number < 0.01) {
				return this.messageError('总金额/奖励数量应至少为0.01', 1);
			}
			this.isError = -1
		},
		// 校验数量
		checkRedNumber(event) {
			console.log("this.from.number", this.from.number)
			const value =  event.target.value
			if (!this.from.singleAmount) {
				if (!value) {
					return this.messageError('红包个数不能为空', 3);
				}
				if (value % 1 !== 0) {
					return this.messageError('请输入整数', 3);
				}
				if (value < 0.01) {
					return this.messageError('红包个数不能小于0.01', 3);
				}
				if (value > 1000) {
					this.from.number = 1000
					return this.messageError('红包个数不能大于1000', 3);
				}
				if (
					this.from.totalAmount &&
					this.from.totalAmount / value > 200
				) {
					return this.messageError('单个金额不能大于200元', 3);
				}
				if (
					this.from.totalAmount &&
					this.from.totalAmount / value < 0.01
				) {
					return this.messageError('单个金额不能小于0.01元', 3);
				}
			} else {
				if (!value) {
					return this.messageError('红包个数不能为空', 3);
				}
				if (value % 1 !== 0) {
					return this.messageError('请输入整数', 3);
				}
				if (value > 1000) {
					this.from.number = 1000
					return this.messageError('红包个数不能大于1000', 3);
				}
				if (value * this.from.singleAmount < 0.01) {
					return this.messageError('总金额不能小于0.01元', 3);
				}
				if (value * this.from.singleAmount > this.Amount) {
					return this.messageError('总金额不能大于余额', 3);
				}
				if (value * this.from.singleAmount > 6000) {
					return this.messageError('总金额不能大于6000元', 3);
				}
			}
			this.isError = -1
		},
		checkSingleAmount(event) {
			const value = event.target.value
			if (!this.from.number) {
				if (!value) {
					return this.messageError('单个金额不能为空', 2);
				}
				if (value < 0.01) {
					return this.messageError('单个金额不能小于0.01元', 2);
				}
				if (value > 200) {
					return this.messageError('单个金额不能大于200元', 2);
				}
			} else {
				if (!value) {
					return this.messageError('单个金额不能为空', 2);
				}
				if (value < 0.01) {
					return this.messageError('单个金额不能小于0.01元', 2);
				}
				if (value > 200) {
					return this.messageError('单个金额不能大于200元', 2);
				}
				if (value * this.from.number < 0.01) {
					return this.messageError('总金额不能小于0.01元', 2);
				}
				if (value * this.from.number > this.Amount) {
					return this.messageError('总金额不能大于余额', 2);
				}
				if (value * this.from.number > 6000) {
					this.from.singleAmount = 6000
					return this.messageError('总金额不能大于6000元', 2);
				}
			}
			this.isError = -1
		},
		backEvent() {
			uni.navigateBack()
		},
		// 选择红包类型
		closeEvent(type) {
			this.from.type = type
			this.isRedMask = false
		},
		// 发送红包
		async sendRedPacket() {
			let that = this
			const price =
				this.from.type === 1 ?
					Number(this.from.totalAmount) :
					Number(this.from.singleAmount)
			const amount = parseInt(
				price * 100
			)
			// if(!this.from.title) return uni.showToast({
			// 		title: '请填写红包标题',
			// 		icon: 'none'
			// 	})
			if (amount <= 0 || this.from.number == 0) {
				uni.showToast({
					title: '请填写红包信息',
					icon: 'none'
				})
				return false;
			}

			if (this.from.type == 1) {
				var mag = await this.checkTotalAmount()
			} else {
				var magss = await this.checkSingleAmount()
			}
			const mags = await this.checkRedNumber()
			console.log('checkRedNumbercheckRedNumber', mag, mags, magss)
			if (mag !== undefined || mags != undefined || magss != undefined) {
				uni.showToast({
					title: mag || mags || magss,
					icon: 'none'
				})
				return false;
			}
			uni.showModal({
				title: '提示',
				content: '确定要发红包吗？',
				success: async (res) => {
					console.log('res', res)
					if (res.confirm) {
						if (price >= 20) {
							that.isSMS = true
						} else {
							that.sendRed({
								smsCode: ''
							})
						}
					}
				}
			})
		},
		CloseEvent() {
			this.isSMS = false
		},
		async sendRed(e) {
			const price =
				this.from.type === 1 ?
					Number(this.from.totalAmount) :
					Number(this.from.singleAmount)
			const params = {
				amount: parseInt(
					price * 100
				),
				desc: this.from.title,
				liveId: this.params.liveId,
				num: Number(this.from.number),
				type: this.from.type,
			}
			if (e.smsCode) {
				params.smsCode = e.smsCode
			}
			const {
				data
			} = await this.$request(this.$Api.redPacketCreate, params, "POST")
			if (data.code !== 200) {
				if (this.isSMS) {
					this.isSMSStatus = true
				}
			} else {
				// 关闭弹窗
				if (this.isSMS) {
					this.isSMS = false
					this.isSMSStatus = false
				}
				uni.showToast({
					title: '创建成功',
					icon: 'none'
				})
				// var pages = getCurrentPages();
				// var prevPage = pages[pages.length - 2]; //上一个页面
				// //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
				// // 上一个页面最后设置userdata
				// //uni或者vue用$vm
				// prevPage.$vm.isRefresh = true
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.isRefresh = true; //修改上一页data里面的isRefresh
				setTimeout((res) => {
					uni.navigateBack()
				}, 800)
			}

		},
	}
}
</script>

<style lang="scss">
.prizeDraw {
	width: 100%;
	height: 992rpx;
	background: #FFFFFF;
	border-radius: 16rpx 16rpx 0rpx 0rpx;
	overflow-y: hidden;
	// position: fixed;
	bottom: 0;
	left: 0;
	padding: 0 32rpx;
	box-sizing: border-box;

	color: #464C5B;
	font-size: 28rpx;

	.zj_red_from {
		font-size: 28rpx;

		.zj_red_from_items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #E3E8EE;
			padding: 0 16rpx;
			position: relative;
			font-size: 28rpx;

			.zj_red_from_right_error {
				font-size: 20rpx;
				color: #FF5A5F;
				position: absolute;
				bottom: -70rpx;
				left: 0;
			}

			.zj_red_from_right {
				text-align: right;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.zj_red_from_right_input {
					width: 320rpx;
					height: 100%;
					font-size: 28rpx;

					input {
						width: 100%;
						height: 100%;
						font-size: 28rpx;
					}

				}

				image {
					width: 44rpx;
					height: 44rpx;
					margin-left: 16rpx;
				}

			}
		}

	}








	.prizeDraw_top {
		width: 100%;
		height: 100rpx;
		position: relative;
		text-align: center;
		font-size: 32rpx;
		line-height: 100rpx;

		.prizeDraw_top_close {}


		.prizeDraw_top_close_left {
			position: absolute;
			left: 0;
			top: 10rpx;
			width: 44rpx;
			height: 44rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}


		.closeImg {
			position: absolute;
			right: 0;
			top: 32rpx;
			width: 32rpx;
			height: 32rpx;
		}

	}


	.prizeDraw_top_title {
		width: 100%;
		height: 80rpx;
		font-size: 28rpx;
		color: #464C5B;
		text-align: left;
		font-weight: 600;
		line-height: 80rpx;

		span {
			color: #FF5A5F;
		}
	}


	.prizeDraw_user_item_top {
		width: 100%;
		height: 110rpx;
		border-bottom: 1rpx solid #D7DDE4;
		display: flex;
		justify-content: flex-start;
		padding: 0 24rpx;
		box-sizing: border-box;
		align-items: center;

		.prizeDraw_user_item_top_left {
			width: 62rpx;
			height: 62rpx;
			margin-right: 16rpx;

			image {
				border-radius: 50%;
			}
		}

	}

	.prizeDraw_items_cont_items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40rpx;
		margin-top: 20rpx;
		// padding: 0 24rpx;
		// box-sizing: border-box;
		font-size: 24rpx;

		color: #8C8C8C;

		.prizeDraw_items_cont_items_left {
			width: 100%;
			display: flex;
			align-items: center;


			.color_blue {
				color: #295EFF;
			}

			.prizeDraw_items_cont_items_cont {
				width: 480rpx;
				text-align: left;
				color: #464C5B;
			}
		}

	}

	.listSpace {
		padding-top: 100rpx;
	}

	.zj_red_text {
		width: 686rpx;
		height: 66rpx;
		background: #FFE6E7;
		border-radius: 8rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		color: #FF5A5F;
		font-size: 24rpx;
		margin-top: 66rpx;
		line-height: 66rpx;
	}

	.zj_red_btn {
		width: 750rpx;
		height: 166rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		padding-bottom: 74rpx;
		bottom: 0;
		left: 0;

		.zj_red_btn_cont {
			width: 552rpx;
			height: 80rpx;
			background: #295FFF;
			border-radius: 46rpx;
			font-size: 32rpx;
			color: #fff;
			line-height: 80rpx;
		}
	}

	.colorRed {
		color: #FF5A5F;
	}

	.colorRedLine {
		border-bottom: 1rpx solid #FF5A5F !important;
	}

	.inputNumClass {
		display: flex;

		align-items: center;

		input {
			width: 176rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #E3E8EE;
			text-align: center;
			margin-right: 16rpx;
		}

	}

	.redDB {
		width: 100%;
		height: 380rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		overflow: hidden;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		z-index: 99;

		.redDB_items {
			width: 750rpx;
			height: 112rpx;
			background: #FFFFFF;
			font-size: 34rpx;
			color: #000;
			text-align: center;
			line-height: 112rpx;
			border: 1rpx solid #F2F2F2;
		}

		.redDB_items_btn {
			border: none;
			border-top: 16rpx solid #F2F2F2;


		}
	}

}</style>